<template>
  <u-popup
    mode="bottom"
    v-model="showInputPop"
    :z-index="1211"
    safe-area-inset-bottom
    @open="showInput = true"
    @close="showInput = false"
  >
    <view class="popBox">
      <input
        class="inp"
        v-model="content"
        ref="value"
        :placeholder="$t('videoGoods.detail.footerText')"
        :focus="showInput"
        @confirm="$emit('submit', content)"
      />
    </view>
  </u-popup>
</template>

<script>
export default {
  watch: {
    showInputPop(e) {
      if (!e) this.content = "";
    },
  },

  data() {
    return {
      showInputPop: false,
      showInput: false,
      content: "",
    };
  },
};
</script>

<style lang="less" scoped>
.popBox {
  padding: 20rpx;
  background: #f2f2f2;
}

.inp {
  padding: 0 20rpx;
  width: 100%;
  height: 70rpx;
  border-radius: 4px;
  background: #fff;
  font-size: 30rpx;
}
</style>
